<template>

  <div class="employee-container">
    <el-row>
      <div>
        <div style="margin-bottom: 55px">
          <div style="float: left ;">
              <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/nightowl' }">网站主页</el-breadcrumb-item>
                <el-breadcrumb-item>影视空间</el-breadcrumb-item>
                <el-breadcrumb-item>影视分区</el-breadcrumb-item>
              </el-breadcrumb>
          </div>
              <div style="float: right;width: 40%;">
                <div style="margin-left: 70%;">
                    <div >
                      <el-button @click="btnAddClick" type="primary" icon="el-icon-edit" style="width: 100%;margin: 0">添加</el-button>
                    </div>
                </div>
              </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100% ">
        <el-table-column
          prop="id"
          label="id"
          width="110">
        </el-table-column>
        <el-table-column
          prop="name"
          label="作品名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="value"
          label="评价"
          width="150">
        </el-table-column>
        <el-table-column
          prop="later"
          label="内容">
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              <el-button type="danger" icon="el-icon-delete"  style="width: 80px;margin: 0">删除</el-button>
              <el-button type="info" icon="el-icon-share"  style="width: 80px;margin: 0">修改</el-button>
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        small
        layout="prev,pager,next"
        :total="50">
      </el-pagination>
    </el-row>
    <el-dialog
      :before-close="selectoff"
      :visible.sync="selectVisible"
      title="修改评论"
      width="30%">
      <el-form>
        <el-form-group>
          <el-form-item label="id" label-width=" 100px" style="margin-right: 70px">
            <el-input v-model="selectdata.id" />
          </el-form-item>
          <el-form-item label="作品名" label-width=" 100px" style="margin-right: 70px">
            <el-input v-model="selectdata.name" />
          </el-form-item>
          <el-form-item label="评分" label-width=" 100px" style="margin-right: 70px">
            <el-input v-model="selectdata.value" />
          </el-form-item>
          <el-form-item label="内容" label-width=" 100px" style="margin-right: 70px">
            <el-input v-model="selectdata.later" />
          </el-form-item>
        </el-form-group>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="selectVisible = false">取 消</el-button>
          <el-button  @click="selectHandle" type="primary" >确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      title="发布评论"
      width="30%">
      <el-form>
        <el-form-group>
          <el-form-item label="id" label-width=" 100px" style="margin-right: 70px">
            <el-input v-model="employee.id" />
          </el-form-item>
          <el-form-item label="作品名" label-width=" 100px"style="margin-right: 70px">
            <el-input v-model="employee.name" />
          </el-form-item>
          <el-form-item label="评分" label-width=" 100px"style="margin-right: 70px">
            <el-input v-model="employee.value" />
          </el-form-item>
          <el-form-item label="内容" label-width=" 100px"style="margin-right: 70px">
            <el-input v-model="employee.later" />
          </el-form-item>
        </el-form-group>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button  @click="sumbmitHandle" type="primary" >确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import HelloWorld from "../../components/HelloWorld";
  export default {
    name: "Employee3",
    components: {HelloWorld},
    data(){
      return {

        tableData: [
          {name: '第九区',
            id: '国服首喷',
            value: '一部将观众的共情牢牢掌握的优秀电影',
            later:'《第九区》是典型的伪纪录片电影，即以仿制纪录片的形式进行的一种电影拍摄方式，但《第九区》又并非是纯粹以场外采访、晃动的实景拍摄以及实地摄像头画面组合而成，在主人公维库斯被感染后，正式的拍摄画面便逐渐取代了上述的画面，这点或许是导演想刻意表达出的一种镜头语言...'},
          {name: '迪迦奥特曼',
            id: '不废江河万古留',
            value: '迪迦奥特曼：子供向作品也可以有深度',
            later:'我们要纠正的误区，不是迪迦不是子供向，而是子供向＝幼稚！很多面向成人的影视作品，逻辑混乱，三观成迷，毫无格局，幼稚的令人发笑。在放送完毕后迅速被观众遗忘，仿佛从来就不存在一般。而迪迦，作为一部子供向的作品，在1996年问世以来，征服无数的观众，历经25年，仍有着惊人的生命力。迪迦已经证明了自己的优秀...'},
          {name: '九号密事',
            id: '来一碗荔枝',
            value: '无标题',
            later:'九号秘事yyds！！二册和胖胖真的太棒啦！！'},
          {name: 'GUNDAM BD',
            id: '暗川流刃',
            value: '久我悠人与三上陆：天差地别的创形者',
            later:'高达创形者第一季无疑是一部失败的作品。然而它的失败并不是作品整体非常失败，而是作为主人公的三上陆的人物塑造以及围绕着他的情节安排十分失败。于是到了第二季的再起，开局顶着创形者PTSD+卖胶番刻板印象+被战争束缚着的“老高达粉”们的口诛笔伐的重压之下，所有人都等着看这个开着矮达酷似三日月的男主再来一波降智霸王流。然而后续的发展证明，我们都错了...'},

        ],
        url: '/static/tx.jpg',
        drawer: false,
        innerDrawer: false,
        value1: true,
        value7:35,
        value8:65,
        dialogVisible: false,
        selectVisible: false,
        employee: {
          name: '',
          id: '',
          value: '' ,
          later:'',
        },
        selectdata: {
          name: '',
          id: '',
          value: '' ,
          later:'',
        },
        selectnativedata:{
          name: '',
          id: '',
          value: '' ,
          later:'',
        }
      }
    },
    methods: {

      deleteRow(index, rows) {
        rows.splice(index, 1);
      },



      selectoff() {
        this.selectVisible = false;
      },
      selecton() {
        this.selectVisible = true;
      },
      selectHandle() {
        var _this = this;
        this.axios({
          url: 'http://127.0.0.1:3000/emp/add',
          method: 'get',
          params: {
            name: this.selectdata.name,
            id: this.selectdata.id,
            value: this.selectdata.value,
            later: this.selectdata.later
          }
        }).then(function (res) {
          if (res.data.flag) {
            _this.tableData = res.data.emps;
            _this.$message('修改成功');
            _this.selectVisible = false;
          } else {
            _this.$message('失败');
          }
        })
      },




      handleClose() {
        this.dialogVisible = false;
      },
      btnAddClick() {
        this.dialogVisible = true;
      }, sumbmitHandle() {
        var _this = this;
        this.axios({
          url: 'http://127.0.0.1:3000/emp/add',
          method: 'get',
          params: {
            name: this.employee.name,
            id: this.employee.id,
            value: this.employee.value,
            later: this.employee.later
          }
        }).then(function (res) {
          if (res.data.flag) {
            _this.tableData = res.data.emps;
            _this.$message('添加成功');
            _this.dialogVisible = false;
          } else {
            _this.$message('失败');
          }
        })
      },
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }

  }
</script>

<style scoped>
  .el-button{
    margin-right: 10px;
    width:20%;
  }
  .employee-container{
    margin-left: 15px;
  }

  .image {
    width: 180px;
    display: block;
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>
